<template>
	<div class="masonry-container">
		<div class="masonry" :style="{ 'column-count': columnCount }">
			<div v-for="(item, index) in dataSource" :key="item.id" class="masonry-item">
				<div style="position: relative;">
					<div class="show-pc">
						<div class="icfont_box">
							<div>
								<div class="icon-real" @click="toggleIcon(index, 'heart')"
									v-if="item.icons.heart.isSolid"><img src="../../assets/images/new_img/实心.png" alt=""
										class="img_png"></div>
								<div class="icon-empty" @click="toggleIcon(index, 'heart')" v-else><img
										src="../../assets/images/new_img/空心.png" alt="" class="img_png"> </div>
							</div>
							<div>
								<div class="icon-real" @click="toggleIcon(index, 'star')"
									v-if="item.icons.star.isSolid"><img src="../../assets/images/new_img/实心收藏.png"
										alt="" class="img_png"> </div>
								<div class="icon-empty" @click="toggleIcon(index, 'star')" v-else><img
										src="../../assets/images/new_img/空心收藏.png" alt="" class="img_png"></div>
							</div>
						</div>
					</div>

					<div class="show-wap">
						<div class="icfont_box-wap">
							<div>
								<div class="icon-real-wap" @click="toggleIcon(index, 'heart')"
									v-if="item.icons.heart.isSolid"><img src="../../assets/images/new_img/实心.png" alt=""
										class="img_png-wap"></div>
								<div class="icon-empty-wap" @click="toggleIcon(index, 'heart')" v-else><img
										src="../../assets/images/new_img/空心.png" alt="" class="img_png-wap"> </div>
							</div>
							<div>
								<div class="icon-real-wap" @click="toggleIcon(index, 'star')"
									v-if="item.icons.star.isSolid"><img src="../../assets/images/new_img/实心收藏.png"
										alt="" class="img_png-wap"> </div>
								<div class="icon-empty-wap" @click="toggleIcon(index, 'star')" v-else><img
										src="../../assets/images/new_img/空心收藏.png" alt="" class="img_png-wap"></div>
							</div>
						</div>
					</div>
					<img :src="item.imgurl" :alt="item.text" class="responsive-image" loading="lazy"
						@click="emits('toDetail', item)">
				</div>


				<div class="show-pc">
					<div class="card-content" @click="emits('toDetail', item)">
						<div class="text">{{ item.text }}</div>
						<div class="name">
							<img :src="item.imgurl" alt="">
							<p class="p_name">{{ item.name }}</p>
						</div>
					</div>
				</div>
				<!-- 移动端 -->
				<div class="show-wap">
					<div class="card-content" @click="emits('toDetail', item)">
						<div class="text-wap">{{ item.text }}</div>
						<div class="name" >
							<img :src="item.imgurl" alt="" class="name-img">
							<p class="p_name-wap">{{ item.name }}</p>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script setup>
import {
	ref,
	onMounted,
	onBeforeUnmount
} from 'vue';

const emits = defineEmits(['toDetail']);

const props = defineProps({
	col: {
		type: [String, Number],
		default: 6
	},
	dataSource: {
		type: Array,
		default: () => []
	},
});

const columnCount = ref(props.col);

const updateColumnCount = () => {
	const width = window.innerWidth;
	if (width <= 480) columnCount.value = 2;
	else if (width <= 768) columnCount.value = 4;
	else if (width <= 992) columnCount.value = 5;
	else if (width <= 1200) columnCount.value = 6;
	else columnCount.value = 6;
};

// 添加防抖优化
let resizeTimer;
const debouncedUpdate = () => {
	clearTimeout(resizeTimer);
	resizeTimer = setTimeout(updateColumnCount, 100);
};

onMounted(() => {
	updateColumnCount();
	window.addEventListener("resize", debouncedUpdate);
});

onBeforeUnmount(() => {
	window.removeEventListener("resize", debouncedUpdate);
});

// 初始化每个数据项的图标状态
const initIcons = () => {
	props.dataSource.forEach(item => {
		item.icons = {
			heart: {
				isSolid: false
			},
			star: {
				isSolid: false
			}
		};
	});
};

initIcons();

// 通用切换函数
const toggleIcon = (index, type) => {
	props.dataSource[index].icons[type].isSolid = !props.dataSource[index].icons[type].isSolid;
};
</script>

<style lang="less" scoped>
.masonry-container {
	padding: 0 16px;
	padding-bottom:80px;
}

.masonry {
	column-gap: 16px;
	width: 100%;
}

.masonry-item {
	break-inside: avoid;
	margin-bottom: 0.52vw;
	width: 100%;
	display: inline-block;
}

// 手机
.icfont_box-wap {
	width: 40%;
	height: 35px;
	position: absolute;
	bottom: 10px;
	left: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	.icon-real-wap {
		width: 35px;
		height: 35px;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 10px;
		
		display: flex;
		justify-content: center;
		align-items: center;
		

		.img_png-wap {
			width: 20px;
			height: 20px;
		}
	}

	.icon-empty-wap {
		width: 35px;
		height: 35px;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;

		.img_png-wap {
			width: 20px;
			height: 20px;
		}

	}





}


// 手机样式

.icfont_box {
	width: 30%;
	height: 1.82vw;
	position: absolute;
	bottom: 0.62vw;
	left: 0.52vw;
	display: flex;
	justify-content: center;
	align-items: center;
	/* 新增：垂直居中 */
	gap: 10px;

}

.icfont_box>div {
	display: flex;
	align-items: center;
}

.icon-empty {
	width: 1.56vw;
	height: 1.56vw;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 0.52vw;
	display: flex;
	justify-content: center;
	align-items: center;

	.img_png {
		width: 1vw;
		height: 1vw;
	}

}

.icon-real {
	width: 1.56vw;
	height: 1.56vw;
		background-color: rgba(0, 0, 0, 0.5);
	border-radius: 0.52vw;
	// opacity: 0.8;
	display: flex;
	justify-content: center;
	align-items: center;

	.img_png {
		width: 1vw;
		height: 1vw;
	}
}

.responsive-image {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

.card-content {
	margin-bottom: 10px;
	
	border-radius: 0 0 8px 8px;
}

.card-content .name {
	display: flex;
	align-items: center;
	margin-top: 0.52vw;

}

.card-content .name>img {
	width:1.56vw;
	height: 1.56vw;
	border-radius: 2.6vw;
}

.card-content .name .p_name {
	margin-left: 0.52vw;
	font-size: var(--text-12);
	color: var(--color-text);
}

.text {
	font-size: var(--text-16);
	text-align: left;
	color: var(--color-text-3);
	margin: 0.3vw 0px;
}


.text-wap{
	margin: 6px 0px;
	font-size: clamp(12px, 2vw, 16px);
	text-align: left;
	color: var(--color-text-3);
}
.card-content .name .name-img {
	width:30px;
	height: 30px;
	border-radius: 50%;
}


.p_name-wap{
	margin-left: 10px;
	font-size: 12px;
	color: var(--color-text);
}
</style>